<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03JS事件监听</title>
</head>
<body>
<button>按钮</button>
<h4>震惊:专家建议空腹不要吃饭!</h4>
Lorem*50
<script>
    /*鼠标移入事件 mouseover */
    let h4E = document.querySelector('h4');
    h4E.addEventListener("mouseover",function (){
        console.log('标题被(悬停)了!');
    });
    /*点击事件 click */
    let buttonE = document.querySelector('button');
    //给按钮元素绑定监听事件,只要点击,就会触发function中的代码
    buttonE.addEventListener("click",function (){
        alert('按钮被点击了!');
    });
    /*window是DOM自带的对象,它是一个全局对象,代表了当前浏览器窗口
    resize监听修改窗口大小事件
    scroll监听窗口滚动条滚动事件 */
    window.addEventListener("resize",function (){
        alert('窗口被重设大小了!');
    });
    window.addEventListener("scroll",function (){
        alert('窗口的滚动条滚动了!');
    });
</script>
</body>
</html>